<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/google-chart/google-chart.html">
<link rel="import" href="../view-app.html">
<link rel="import" href="../style/shared-styles.html">

<dom-module id="view-track-performance">
    <template>
        <style include="shared-styles app-grid-style">
             :host {
                margin: 10px;
                display: block;
                --app-grid-columns: 1;
                --app-grid-item-height: 50%;
            }

            h1.title {
                text-align: center;
                margin: 20px 0 30px 0;
                font-size: 1.75rem;
            }

            .btn {
                margin: 20px 0 4px 0;
                width: 300px;
            }

            google-chart {
                margin: 0 auto;
            }

            @media (min-width: 360px) and (max-width: 768px) {
                .btn {
                    width: 100%;
                }
            }
        </style>
        <firebase-auth app-name="smart-mes" id="auth" user="{{user}}"></firebase-auth>
        <firebase-document app-name="smart-mes" id="userData" path="/user/[[user.uid]]" data="{{k}}"></firebase-document>
        <firebase-document app-name="smart-mes" id="productionPerformance" path="/data/[[k.key]]/performanceData" data="{{productionPerformance}}"></firebase-document>
        <app-localstorage-document key="app-lang" data="{{language}}"></app-localstorage-document>
        <ul class="app-grid">
            <li>
                <div class="card">
                    <h1 class="title">Performance Tracking</h1>
                    <h2 class="center">{{localize('overall-equipment-effectiveness')}}</h2>
                    <google-chart class="center" type="gauge" data='[[getPerformanceValue(productionPerformance.oee)]]' options='[[gaugeOption]]'>
                    </google-chart>
                    <div class="center">
                        <paper-button class="btn" on-click="resetPerformance">
                            Reset Performance Meter
                        </paper-button>
                    </div>
                </div>
                </div>
            </li>
        </ul>
        <paper-toast id="toast" always-on-top horizontal-align="right" text="No statistic found"></paper-toast>
    </template>
    <script>
        /**
         * @ViewTrackPerformance
         * @polymer 
         * @extends {Polymer.Element}
         */
        class ViewTrackPerformance extends Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior],
            Polymer.Element) {
            static get is() {
                return 'view-track-performance';
            }

            static get properties() {
                return {
                    language: String,
                    orderHistoryData: Object,
                    performanceData: Object,
                    gaugeOption: {
                        type: Object,
                        value: () => {
                            return {
                                animation: {
                                    easing: "inAndOut"
                                },
                                width: 500,
                                height: 300,
                                redFrom: 0,
                                redTo: 5,
                                yellowFrom: 5,
                                yellowTo: 15,
                                greenFrom: 90,
                                greenTo: 100,
                                minorTicks: 5
                            }
                        }
                    }
                }
            }
            connectedCallback() {
                super.connectedCallback();
                this.loadResources(this.resolveUrl('../../data/locales.json'));
            }
            getPerformanceValue(oee) {
                return [
                    ["Label", "Value"],
                    ["OEE", oee]
                ]
            }

            calculateOEE(goodCount, idealCycleTime, plannedProductionTime) {
                //  const availability = runTime / plannedProductionTime
                //  const performance = (idealCycleTime * TotalCount) / runTime
                //  const quality = goodCount / TotalCount
                const oee = (goodCount * idealCycleTime) / plannedProductionTime
                return oee
            }

            resetPerformance() {
                this.set('productionPerformance.oee', 100)
            }

        }
        customElements.define(ViewTrackPerformance.is, ViewTrackPerformance);
    </script>
</dom-module>